﻿<template>
  <s-layout title="到店点餐" :bg-style="{ backgroundColor: '#e0e9dd' }">
    <image class="background-banner" src="https://img.zcool.cn/community/0199265c49397ea80121df9039644c.jpg@1280w_1l_2o_100sh.jpg" mode="widthFix"></image>
    <view class="content-wrapper">
      <view class="action-cards">
        <view class="card-row">
          <view class="action-card" @click="goToMenu">
            <image class="card-icon" src="https://s1.ax1x.com/2023/04/13/ppfr26e.png"></image>
            <text class="card-title">自助点餐</text>
            <text class="card-subtitle">提前点餐，到店自提</text>
          </view>
          <view class="action-card" @click="goToOrders">
            <image class="card-icon" src="https://s1.ax1x.com/2023/04/13/ppfrdSO.png"></image>
            <text class="card-title">我的订单</text>
            <text class="card-subtitle">查看订单进度</text>
          </view>
        </view>
        <view class="card-row">
          <view class="action-card full-width">
            <view class="left-content">
              <image class="card-icon" src="https://s1.ax1x.com/2023/04/13/ppfr5xJ.png"></image>
              <text class="card-title">在线客服</text>
            </view>
            <uni-icons type="arrow-right" size="16" color="#999"></uni-icons>
            <!-- #ifdef MP -->
            <button class="contact-button" open-type="contact"></button>
            <!-- #endif -->
          </view>
        </view>
      </view>
      <view class="disclaimer">
        <text>本产品为第三方代点服务</text>
        <text>即第三方平台代下单服务，与霸王茶姬官方无关</text>
      </view>
    </view>
  </s-layout>
</template>

<script setup>
import { onLoad } from '@dcloudio/uni-app';
import { ref } from 'vue';
import sheep from '@/sheep';

const cateringInfo = ref({
  name: '',
  type: '',
  ot: 1,
  banner: 'https://img.zcool.cn/community/0199265c49397ea80121df9039644c.jpg@1280w_1l_2o_100sh.jpg',
});

onLoad((options) => {
  const { cateringName, cateringType, ot } = options;
  uni.setNavigationBarTitle({
    title: cateringName || '到店点餐'
  });

  cateringInfo.value.name = cateringName;
  cateringInfo.value.type = cateringType;
  if (ot) {
    cateringInfo.value.ot = parseInt(ot);
  }

  console.log('餐厅信息:', cateringInfo.value);
});

function goToMenu() {
  // 获取城市信息（优先从缓存，否则使用默认值）
  const cache = uni.getStorageSync('index-map') || {};
  const cityId = cache.id || 80;
  const cityName = cache.name || '洛阳';

  console.log('跳转到门店列表，参数:', {
    ot: cateringInfo.value.ot,
    cateringName: cateringInfo.value.name,
    cityId,
    cityName
  });

  sheep.$router.go('/pages/catering/store-list', {
    ot: cateringInfo.value.ot,
    cateringName: cateringInfo.value.name,
    cityId,
    cityName
  });
}

function goToOrders() {
  sheep.$router.go('/pages/order/list');
}

function contactService() {
  // #ifndef MP
  uni.showToast({ title: '请在小程序中打开客服', icon: 'none' });
  // #endif
}
</script>

<style lang="scss" scoped>
.background-banner {
  width: 100%;
  display: block;
}

.content-wrapper {
  background-color: #617f57;
  border-top-left-radius: 30rpx;
  border-top-right-radius: 30rpx;
  padding: 40rpx 30rpx;
  margin-top: -30rpx;
  position: relative;
  z-index: 1;
}

.action-cards {
  .card-row {
    display: flex;
    justify-content: space-between;
    gap: 30rpx;
    margin-bottom: 30rpx;
  }

  .action-card {
    background-color: #f8f9f7;
    border-radius: 20rpx;
    padding: 30rpx;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: center;
    flex: 1;
    box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.05);

    &.full-width {
      width: 100%;
      flex-direction: row;
      justify-content: space-between;
      align-items: center;
      position: relative;
    }
  }

  .contact-button {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
  }

  .left-content {
    display: flex;
    align-items: center;
  }

  .card-icon {
    width: 60rpx;
    height: 60rpx;
    margin-bottom: 20rpx;
  }

  .full-width .card-icon {
    margin-bottom: 0;
    margin-right: 20rpx;
  }

  .card-title {
    font-size: 32rpx;
    font-weight: bold;
    color: #333;
    white-space: nowrap;
  }

  .card-subtitle {
    font-size: 24rpx;
    color: #999;
    margin-top: 10rpx;
    white-space: nowrap;
  }
}

.disclaimer {
  display: flex;
  flex-direction: column;
  align-items: center;
  color: #fff;
  font-size: 24rpx;
  opacity: 0.6;
  margin-top: 60rpx;
  padding-bottom: 40rpx;
  gap: 10rpx;
}
</style>
